import { Button, Popover } from "antd";
import React from "react";

interface Item {
    /**列表项的展示名称 */
    name: string,

    /**列表项对应执行的函数 */
    action: Function
}

export interface Props {
    /**卡片标题 */
    title: string

    /**下拉菜单的列表项 */
    list: Item[]

    /**气泡框位置 */
    placement?: string
}

const PopoverList: React.FC<Props> = props => {
    console.debug('PopoverMenu', props);

    const MenuPanel = (
        <>
            {props.list.map(item =>
                <div key={item.name}>
                    <Button
                        onClick={() => { handleClick(item) }}
                        type='text'
                    >
                        {item.name}
                    </Button>
                </div>
            )}
        </>
    )


    function handleClick(item: Item) {
        if (item.action) {
            item.action();
        }
    }

    return (
        <Popover title={props.title} content={MenuPanel} placement='bottomLeft'>
            {props.children}
        </Popover>
    );
}

export default PopoverList;